<template>
    <ex-dialog width="1000px" class="ex-diolog" :title="title" :visible="visible" @closeDialog="handleClose">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">
        <div>
          <!-- <div class="lable_l">
            <el-button type="primary" @click="handleAdd">新增</el-button>
          </div> -->
          <div class="bannerBox" v-for="(item, index) in ruleForm.navList" :key="200 + index">
            <div class="imgBox">
              <el-form-item :label="'分类' + (index+1) + '是否启用:'">
                <el-switch v-model="item.status" active-text="是" :active-value="'0'" inactive-text="否" :inactive-value="'1'"></el-switch>
              </el-form-item> 
              <el-form-item label="主标题:" :prop="`navList.${index}.mainTitle`" :rules="rules.mainTitle">
                <el-input type="text" v-model="item.mainTitle" autocomplete="off" placeholder="请输入" :style="{ width: inputWidth }"></el-input>
              </el-form-item>
              <el-form-item label="副标题:" :prop="`navList.${index}.subTitle`" :rules="rules.subTitle">
                <el-input type="text" v-model="item.subTitle" autocomplete="off" placeholder="请输入" :style="{ width: inputWidth }"></el-input>
              </el-form-item>
            </div>
          </div>
        </div>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">确认</el-button>
          <el-button @click="handleClose('ruleForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </ex-dialog>
  </template>
  <script>
  // components
  import Loading from '@/components/Loading/index'
  // api
  import {
    jtkHomePageClassification,jtkHomePageClassificationSet
  } from '@/api/incentiveManagement/adConfigNew'
  
  export default {
    components: {
      Loading
    },
    props: {
      visible: Boolean,
      id: String,
      pathType: String,
    },
    data() {
      return {
        inputWidth: '400px',
        title: '导航分类配置',
        loading: false,
        ruleForm: {
          navList:[
            {
              id:'',
              mainTitle:'',//主标题
              status:'',//启用状态0启用 1禁用
              subTitle:'',//副标题
            }
          ],
        },
        rules: {
          mainTitle: [
            { required: true, message: '请输入主标题', trigger: ['blur','change'] }
          ],
          subTitle: [
            { required: true, message: '请输入副标题', trigger: ['blur','change'] }
          ],
        }
      }
    },
    computed: {
  
    },
    created() {
      this.getDetail()
    },
    methods: {
      //获取详情
      getDetail() {
        const params = {};
        jtkHomePageClassification(params).then((res) => {
          this.ruleForm.navList = res.result
        })
        
      },
      //获取插件下拉列表
      getHomePagePlugin() {
        var data = {}
        homePagePlugin(data).then(res => {
          this.options = res.result
        })
      },
      //新建
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading = true
            var data = this.ruleForm.navList
            jtkHomePageClassificationSet(data).then(res => {
              this.$message.success('操作成功')
              this.handleClose()
              this.$emit('success')
              this.loading = false
            }).catch(() => {
              this.loading = false
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //取消
      handleClose(formName) {
        this.$emit('update:visible', false)
        // this.$refs[formName].resetFields();
      },
      //新增轮播图
      handleAdd() {
        var obj = {
          imgUrl: '',//图片地址
          name:'',//轮播图名称
          pageId:'',//页面ID
          pluginId:'',//插件ID
          skipType:'',//跳转方式小程序插件1 小程序链接2
          skipUrl:'',//跳转链接
          optionsView:[],//插件下拉
        }
        this.ruleForm.navList.push(obj)
      },
  
    }
  }
  </script>
  <style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
      padding: 0 !important;
    }
  
    ::v-deep .ex--dialog--main {
      padding: 10px 20px !important;
    }
  }
  
  ::v-deep .avatar-uploader2 .el-upload {
    width: 100% !important;
  }
  
  .avatar-uploader2 {
    width: 130px;
    height: 130px;
    text-align: center;
    line-height: 130px;
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
  }
  
  .banner_img {
    width: 130px;
    height: 130px;
  }
  
  .el-input {
    width: 300px;
  }
  
  .lable_l {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px 0 20px 80px;
  
    .left {
      margin-right: 20px;
    }
  }
  
  .bannerBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  
    .rig_btn_box {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      width: 100px;
      height: 200px;
  
      .el-button {
        margin: 0;
      }
    }
  }
  
  .imgBox {
    border: 1px solid #f5f5f5;
    border-radius: 12px;
    padding: 20px;
    width: 800px;
  
    .name {
      font-size: 16px;
      color: #606266;
      margin-bottom: 10px;
      padding-left: 50px;
    }
  }
  </style>